<template>
  <SmartTable
      :columns="columns"
      :search-schema="searchSchema"
      :request="getUserList"
      :add-fn="addUser"
      :update-fn="updateUser"
      :delete-fn="deleteUser"
      :enable-selection="true"
      :dialog-component="UserDialog"
      :dialog-props="dialogProps"
  >
    <!-- 自定义头像列 -->
    <template #avatar="{ row }">
      <div class="avatar-cell" @click="openPreview(row.avatar || defaultAvatar)">
        <el-image
            :src="row.avatar || defaultAvatar"
            style="width: 50px; height: 50px; border-radius: 4px; cursor: zoom-in"
            fit="cover"
        />
      </div>
    </template>

    <!-- 自定义状态列 -->
    <template #status="{ row }">
      <el-tag :type="row.status === 1 ? 'success' : 'danger'" class="status-tag">
        {{ row.status === 1 ? '通过' : '未通过' }}
      </el-tag>
    </template>

    <!-- 自定义角色列 -->
    <template #role="{ row }">
      <el-tag :type="row.role === 1 ? 'success' : 'warning'">
        {{ row.role === 1 ? '超级管理员' : '普通用户' }}
      </el-tag>
    </template>


  </SmartTable>
  <!-- 大图预览 -->
  <el-image-viewer
      v-if="showViewer"
      :url-list="previewSrcList"
      @close="showViewer = false"
  />

</template>

<script setup>
import SmartTable from '@/views/page/components/SmartTable.vue'
import UserDialog from '@/views/page/components/UserDialog.vue'
import { getUserList, addUser, updateUser, deleteUser } from '@/api/user'
import DateUtils from "@/utils/dateUtils.js";
import { ref } from 'vue'

const defaultAvatar =
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

const dialogProps = {
  /* 禁用：灰色不可点 */
  disabledInAdd:   [],   // 新增时 username 禁用
  disabledInEdit:  [],       // 编辑时 role 禁用
  disabledInInfo:  ['avatar','sex','status','role'],     // 详情时 avatar 禁用

  /* 只读：可聚焦复制但不可改 */
  readonlyInAdd:   ['status'],     // 新增时 status 只读
  readonlyInEdit:  ['username'],       // 编辑时 nick 只读
  readonlyInInfo:  ['nick','username','age','address','introduce']     // 详情时 address 只读
}

const columns = [
  {
    label: '头像',
    prop: 'avatar',
    slot: 'avatar',
    className: 'avatar-column',
    align: 'center'
  },
  { label: '用户名', prop: 'username' ,align: 'center'},
  { label: '昵称', prop: 'nick', align: 'center'},
  { label: '性别', prop: 'sex', align: 'center'},
  { label: '角色', prop: 'role', slot: 'role',  align: 'center' },
  { label: '状态', prop: 'status', slot: 'status',  align: 'center' },
  /* 关键：创建时间列用 formatter 调用你的函数 */
  {
    label: '创建时间',
    prop: 'regtime',
    align: 'center',
    formatter: (_row, _col, cellValue) => formatTimeToShanghai(cellValue)
  }]

const searchSchema = [
  {
    model: 'username',
    type: 'input',
    props: { placeholder: '请输入用户名' }
  },
  {
    model: 'status',
    type: 'select',
    props: { placeholder: '请选择状态' },
    options: [
      { label: '全部', value: '' },
      { label: '通过', value: '1' },
      { label: '未通过', value: '2' }
    ]
  }
]

/* 预览大图相关 */
const showViewer = ref(false)
const previewSrcList = ref([])

const openPreview = (url) => {
  if (!url) return
  previewSrcList.value = [url]
  showViewer.value = true
}


// 格式化时间 (上海时区)
const formatTimeToShanghai = (dateStr) => {
  return DateUtils.toTimezone(dateStr, 'Asia/Shanghai', 'YYYY-MM-DD HH:mm:ss');
};

</script>

<style scoped>
.avatar-cell {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status-tag {
  margin-right: 5px;
}
</style>